<script setup lang="ts">
  import { ref } from 'vue'
  import ModalHeader from '@/components/ModalHeader/index.vue'
  import { NModal, NButton, NIcon } from 'naive-ui'
  import { WarningAmberOutlined } from '@vicons/material'
  const show = ref(false)
  const content = ref('')
  const emit = defineEmits(['submit', 'close'])
  const handleClose = () => {
    show.value = false
    emit('close')
  }

  const showModal = (_content: string) => {
    content.value = _content
    show.value = true
  }
  const handleSubmit = () => {
    show.value = false
    emit('submit')
  }
  defineExpose({
    showModal,
  })
</script>

<template>
  <n-modal v-model:show="show" style="width: 528px" :bordered="false" @close="handleClose">
    <div class="w-full h-full flex flex-col bg-white rounded pingfang">
      <ModalHeader title="确认" @close="handleClose" />
      <div class="flex-1 flex items-center justify-center">
        <n-icon class="text-[24px] text-[#FF9900]">
          <WarningAmberOutlined />
        </n-icon>
        <div class="text-[16px] text-[#4A5055] ml-2">{{ content }}</div>
      </div>
      <div class="flex justify-end px-5 py-4">
        <n-button class="w-[60px] mr-4 text-[#4A5055]" @click="handleClose"> 取消 </n-button>
        <n-button type="primary" class="w-[60px]" @click="handleSubmit"> 确认 </n-button>
      </div>
    </div>
  </n-modal>
</template>
